<script setup lang="ts">
import { useTencentConversationStore } from '@/stores/tencentConversationStore.ts'
import { useTencentMessageStore } from '@/stores/tencentMessageStore.ts'
import { formatTimestamp } from '@/utils/ComputedTime.ts'
import type { VirtualListInst } from 'naive-ui'
import { useCommon } from '@/hooks/useCommon.ts'
import { WebviewWindow } from '@tauri-apps/api/webviewWindow'

const { openMsgSession } = useCommon()
const tencentConversationStore = useTencentConversationStore()
const tencentMessageStore = useTencentMessageStore()
/** 虚拟列表 */
const virtualListInst = ref<VirtualListInst>()

const messageList = computed(() => {
  const msg = tencentMessageStore.messageListMap[tencentConversationStore.currentConv.conversationID!].map((value) => {
    if (value.payload.parseText === undefined) {
      value.payload.parseText = JSON.parse(value.payload.text)
    }
    return value
  })

  console.log('msg', msg)
  return msg
})

watch(messageList, async () => {
  await nextTick(() => {
    virtualListInst.value?.scrollTo({ position: 'top' })
  })
})

const handleScroll = (event: Event) => {
  const target = event.target as HTMLElement
  // console.log(target, virtualListInst.value)
  // const container = virtualListInst.value?.getScrollContainer()
  // console.log(container, container.scrollTop, target.scrollTop, container.scrollHeight, target.scrollHeight)
  if (
    target.scrollTop < 20 &&
    !tencentMessageStore.isCompletedMap[tencentConversationStore.currentConv?.conversationID!]
  ) {
    console.log('到顶了')
    tencentMessageStore.getMessageList({ conversationID: tencentConversationStore.currentConv?.conversationID })
  }
}

const openWindow = (url: string) => {
  new WebviewWindow('推荐信息', {
    title: '喵信-推荐信息',
    url: url,
    width: 480,
    height: 760,
    center: true,
    resizable: false
  })
}

const openConversation = (convID: string) => {
  openMsgSession({ userID: convID }, 'user')
}

onMounted(async () => {
  await nextTick(() => {
    virtualListInst.value?.scrollTo({ position: 'bottom' })
  })
})
</script>

<template>
  <n-virtual-list
    ref="virtualListInst"
    style="max-height: calc(100vh - 80px)"
    :items="messageList"
    :item-size="100"
    item-resizable
    @scroll="handleScroll($event)">
    <template #default="{ item }">
      <n-card class="my-4 mx-auto" style="max-width: 450px">
        <template #header>
          <n-flex align="center">
            <svg class="size-5"><use href="#build"></use></svg>
            <span>{{ item.payload.parseText.first }}</span>
          </n-flex>
        </template>
        <template #header-extra> {{ formatTimestamp(item.time, true) }} </template>
        <n-descriptions label-placement="left" :column="1">
          <n-descriptions-item :label="item.payload.parseText.keyword1.label">
            {{ item.payload.parseText.keyword1.value }}
          </n-descriptions-item>
          <n-descriptions-item :label="item.payload.parseText.keyword2.label">
            {{ item.payload.parseText.keyword2.value }}
          </n-descriptions-item>
          <n-descriptions-item :label="item.payload.parseText.keyword3.label">
            {{ item.payload.parseText.keyword3.value }}
          </n-descriptions-item>
          <n-descriptions-item :label="item.payload.parseText.keyword4.label">
            {{ item.payload.parseText.keyword4.value }}
          </n-descriptions-item>
        </n-descriptions>
        <!--打开窗口-->
        <template v-if="item.payload.parseText.templateMsgTypeUrl" #action>
          <n-popover trigger="hover" :delay="300" :duration="300" placement="bottom">
            <template #trigger>
              <n-flex
                align="center"
                justify="space-between"
                class="hover:cursor-pointer"
                @click="openWindow(item.payload.parseText.templateMsgTypeUrl)">
                <n-flex align="center" class="float-left">
                  <n-avatar size="small" :src="item.payload.parseText.avatar"></n-avatar>
                  <span>{{ item.payload.parseText.keyword1.value }}</span>
                </n-flex>
                <svg class="size-5"><use href="#arrow-right"></use></svg>
              </n-flex>
            </template>
            <p class="text-center text-12px text-[--chat-text-color] leading-5 p-4px">打开查看详情</p>
          </n-popover>
        </template>
        <!--打开会话-->
        <template v-if="item.payload.parseText.convId" #action>
          <n-flex align="center" justify="space-between">
            <n-flex align="center" class="float-left">
              <n-avatar size="small" :src="item.payload.parseText.avatar"></n-avatar>
              <span>{{ item.payload.parseText.keyword1.value }}</span>
            </n-flex>
            <n-popover trigger="hover" :delay="300" :duration="300" placement="bottom">
              <template #trigger>
                <n-button size="small" @click="openConversation(item.payload.parseText.convId)">点击联系</n-button>
              </template>
              <p class="text-center text-12px text-[--chat-text-color] leading-5 p-4px">点击联系</p>
            </n-popover>
          </n-flex>
        </template>
      </n-card>
    </template>
  </n-virtual-list>
</template>

<style scoped lang="scss"></style>
